<template>
  <el-main>
    <div class="container">
      <div class="banner">
        <img :src="heroImage" :alt="heroAlt" />
        <h1>{{ heroText }}</h1>
        <p>{{ tagline }}</p>
        <el-button type="primary" size="large" @click="handleClick">
          {{ actionText }}
        </el-button>
      </div>
      <el-row class="features" :gutter="30" justify="center">
        <el-col :span="6" v-for="feature in features">
          <h2 class="title">{{ feature.title }}</h2>
          <p class="details">{{ feature.details }}</p>
        </el-col>
      </el-row>
    </div>
  </el-main>
  <el-footer>
    <div class="container">
      <p>{{ footer }}</p>
    </div>
  </el-footer>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useData, useRouter } from 'vitepress';

const { site, frontmatter } = useData();
const router = useRouter();

const heroImage = computed(() => frontmatter.value.heroImage);
const heroAlt = computed(() => frontmatter.value.heroAlt);
const actionLink = computed(() => frontmatter.value.actionLink);
const actionText = computed(() => frontmatter.value.actionText);
const heroText = computed(() => frontmatter.value.heroText || site.value.title);
const tagline = computed(() => frontmatter.value.tagline || site.value.description);
const features = computed(() => frontmatter.value.features);
const footer = computed(() => frontmatter.value.footer);

const handleClick = () => {
  router.go(actionLink.value);
};
</script>

<style scoped lang="scss">
.el-main {
  min-height: calc(100vh - 120px);
  .container {
    @apply p-5;
    .banner {
      @apply text-center mb-10;
      & > img {
        @apply max-w-96 mb-4 inline-block;
      }
      h1 {
        @apply text-4xl m-0 text-[var(--el-text-color-primary)] font-semibold dark:text-gray-100/80;
      }
      p {
        @apply text-lg mt-2 mb-5 text-[var(--el-text-color-regular)] dark:text-gray-300/80;
      }
    }

    .features {
      @apply py-8;
      h2 {
        @apply text-2xl text-[var(--el-text-color-primary)] font-semibold dark:text-gray-100/80;
      }
      p {
        @apply text-[var(--el-text-color-regular)] dark:text-gray-300/80;
      }
    }
  }
}
.el-footer {
  .container {
    @apply mx-0 my-auto;
    p {
      @apply text-center text-sm;
      color: var(--el-color-info);
    }
  }
}
</style>
